<template>
  <el-card class="box-card">
    <el-col :span="24" class="mb20">
      <el-col :span="24">
        <div
          class="table_content"
          style="margin-bottom: 1px;"
        >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus"
            @click="add()"
          >添加
          </el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-delete-solid"
            @click="del()"
          >删除
          </el-button
          >
          <el-button
            type="primary"
            @click="back()"
            size="small"
            icon="el-icon-remove"
          >返回
          </el-button
          >
        </div>
        <el-table
          style="margin-top: 25px;border: 1px solid #ededed;"
          rel="multipleSelection"
          table
          :data="contentModelForm.list"
          stripe
          header-row-class-name="table-header"
          row-class-name="table-row-border"
          cell-class-name="table-row-cell"
          header-cell-class-name="table-header-cell"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          ></el-table-column>
          <el-table-column
            prop="fieldTipsName"
            label="描述"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="fieldFieldName"
            label="字段名"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row)"
                type="text"
                size="small"
                style="font-size: 13px"
              >{{scope.row.fieldFieldName}}
              </el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="fieldTypeString"
            label="类型"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="fieldIsNull"
            label="是否可为空"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ ["否", "是"][scope.row.fieldIsNull] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="fieldIsSearch"
            label="是否支持搜索"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ ["否", "是"][scope.row.fieldIsSearch] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="fieldDefault"
            label="默认值"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <div class="pagess">
          <el-pagination
            style="float:right;display:block"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="contentModelForm.currPage"
            :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="total,sizes,prev, pager, next,jumper"
            :total="contentModelForm.totalRow"
            :loading="loading"
            :page-count="contentModelForm.totalPage"
          ></el-pagination>
        </div>
      </el-col>
    </el-col>
    <el-dialog :visible.sync="showDeptView" title="字段设置:" width="40%">
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="form"
            label-width="90px"
            :model="form">
            <el-form-item label="提示文字" prop="name">
              <el-input placeholder="请输入提示文字" v-model="form.fieldTipsName"></el-input>
            </el-form-item>
            <el-form-item label="字段名" prop="no">
              <el-input placeholder="请输入字段名称" v-model="form.fieldFieldName"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select placeholder="请选择" style="width: 100%" v-model="form.fieldType">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="必填字段">
              <el-radio-group v-model="form.fieldIsNull">
                <el-radio v-for="item in IsNull" :key="item.value" :label="item.value">{{item.text}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="搜索字段">
              <el-radio-group v-model="form.fieldIsSearch">
                <el-radio v-for="item in raSearch" :key="item.value" :label="item.value">{{item.text}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item icon="el-icon-delete-solid" label="默认值">
              <el-input v-model="form.fieldDefault" type="textarea" placeholder="下拉框，多选框等存在多个默认值的必须使用英文逗号隔开"></el-input>
            </el-form-item>
            <el-form-item>
              <span style="float: right;">
                 <el-button
                   v-if="form.fieldId > 0"
                   type="primary"
                   size="small"
                   @click="UpdateView()"
                 >更新</el-button
                 >
                <el-button
                  v-else
                  type="primary"
                  size="small"
                  @click="saveView()"
                >保存</el-button
                >
              </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </el-card>
</template>

<script>
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        readonly: true,
        loading: false,
        showDeptView: false,
        IsNull: [
          {
            value: 0,
            text: "必填"
          },
          {
            value: 1,
            text: "可选"
          }
        ],
        raSearch: [
          {
            value: 0,
            text: "否"
          }, {
            value: 1,
            text: "是"
          },
        ],
        typeList: [
          {
            value: 1,
            label: "单行"
          }, {
            value: 2,
            label: "多行"
          }, {
            value: 3,
            label: "html"
          }, {
            value: 4,
            label: "整数"
          }, {
            value: 5,
            label: "小数"
          }, {
            value: 6,
            label: "时间"
          }, {
            value: 7,
            label: "图片"
          }, {
            value: 8,
            label: "附件"
          }, {
            value: 9,
            label: "下拉框"
          }, {
            value: 10,
            label: "radio选项卡"
          }, {
            value: 11,
            label: "多选框"
          },
        ],
        form: {
          fieldCmid: '',
          fieldId: 0,
          fieldTipsName: "",
          fieldFieldName: "",
          fieldType: "",
          fieldIsNull: "",
          fieldIsSearch: "",
          fieldDefault: ""
        },
        ModelDetailsDto: {
          contentModelId: this.$route.query.contentModelId,
          pageNumber: 1,
          pageSize: 10,
        }
      }
    },
    created() {
      this.form.fieldCmid = this.$route.query.contentModelId
      console.log(this.form)
      this.getModelDetailsList();
    },
    computed: {
      ...mapGetters({
        contentModelForm: "contentModelForm",
      })
    },
    methods: {
      handleSizeChange(val) {
        this.ModelDetailsDto.pageSize = val;
        this.ModelDetailsDto.pageNumber = 1;
        this.getModelDetailsList();
      },
      handleCurrentChange(val) {
        this.ModelDetailsDto.pageNumber = val;
        this.getModelDetailsList(val);
      },
      //获取多选模型id
      handleSelectionChange(val) {
        console.log("获取多选", val);
        this.multipleSelection = [];
        for (let i = 0; i < val.length; i++) {
          if (this.multipleSelection.indexOf(val[i].fieldId) === -1) {
            // this.multipleSelection.push(val[i].cmId);
            this.multipleSelection.push(val[i]);
          }
        }
        console.log("数组", this.multipleSelection);
      },
      //获取列表信息
      getModelDetailsList() {
        this.loading = true;
        this.$store.dispatch("contentModelFormListUsingGETS", this.ModelDetailsDto).then(ret => {
          this.loading = false;
        })
      },
      //查询
      search() {
      },
      //重置
      reset() {
        this.form = {
          fieldCmid: this.$route.query.contentModelId,
          fieldId: "",
          fieldTipsName: "",
          fieldFieldName: "",
          fieldType: "",
          fieldIsNull: "",
          fieldIsSearch: "",
          fieldDefault: ""
        }
      },
      //添加
      add() {
        this.showDeptView = true;
        this.reset()
      },
      //删除
      del() {
        console.log("传参", this.multipleSelection)
        this.$store.dispatch("deleteFormUsingPOSTS", {contentModels: this.multipleSelection}).then(ret => {
          console.log("删除成功", ret)
          this.getModelDetailsList()
        })
      },
      //添加保存自定义模型
      saveView() {
        console.log("数据")
        this.$store.dispatch("saveFormUsingPOSTS", {content: this.form}).then(ret => {
          console.log("保存数据", ret)
          this.showDeptView = false
          this.getModelDetailsList()
        })
      },
      //编辑保存自定义模型
      UpdateView() {
        this.$store.dispatch("updateFormUsingPOSTS", {content: this.form}).then(ret => {
          console.log("更新数据", ret)
          this.showDeptView = false
          this.getModelDetailsList()
        })
      },
      //编辑自定义模型
      edit(row) {
        this.showDeptView = true
        console.log("编辑ID", row)
        var param = {
          filedId: row.fieldId
        }
        this.$store.dispatch("getFromByIdUsingGETS", param).then(ret => {
          console.log("信息", ret)
          this.form = ret.data
        })
        // this.$store.dispatch("saveFormUsingPOSTS",{content:this.form}).then(ret => {
        //   this.form = ret.data
        // })

      },
      //表名详情
      ModelDetails() {
      },
      //返回
      back() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>

</style>
